<template>
  <by-background />

  <view class="padding-bottom-20">
    <by-navigation-bar>
      <template #leading>
        <view class="padding-top-20" />
      </template>

      <view class="flex-row align-center flex-item search-box">
        <text class="technician-sousuo text-32 color-t2 text-bold margin-left-26 margin-right-20" />
        <input
          v-model="params.nickname"
          type="text"
          class="flex-item height-full text-28 color-t1"
          placeholder="请输入技师名称"
          placeholder-class="color-placeholder"
          confirm-type="search"
          @confirm="search"
        />
      </view>

      <template #ending>
        <by-view @click="search">
          <text class="text-32 color-t2 margin-left-20 text-bold">搜索</text>
        </by-view>
      </template>

      <template #background>
        <view class="padding-top-30" />
      </template>
    </by-navigation-bar>

    <view class="padding-lr-20">
      <template v-if="list.length">
        <by-list-card v-for="item in list" :item="item" :key="item.uid" @showSafeguard="showSafeguard = true" @touch="showContact($event, item.tno)"/>
        <by-load-footer :has-more="hasMore" text="加载中..." />
      </template>

      <by-nodata v-else />
    </view>
  </view>

  <by-page-dialogs
    v-model:show-touch="showTouch"
    v-model:show-contact-way="showContactWay"
    v-model:show-error="showError"
    v-model:show-safeguard="showSafeguard"
    :point="point"
    :tno="tno"
    @showContact="showContactWay = true"
  />
</template>

<script setup lang="ts">
import useUserStore from '@/store/user'
import { searchTechnician } from '@/common/api'
import { GetList, toast } from '@/common/util'
import type { AnyObject } from '@/common/types'

const showTouch = ref(false)
const showContactWay = ref(false)
const showError = ref(false)
const showSafeguard = ref(false)
const point = ref(0)
const tno = ref('')

function showContact(e:AnyObject, id:string) {
  tno.value = id
  if (e.unlock) {
    showContactWay.value = true
  } else {
    point.value = e.unlockPoint
    if (e.canGet) showTouch.value = true
    else showError.value = true
  }
}

function search() {
  if (!params.nickname) {
    toast('请输入搜索内容')
    return
  }
  reload()
}

/* 获取列表*/
const userStore = useUserStore()
const hasMore = ref(true)
const list = shallowRef<AnyObject[]>([])
const params = reactive({
  nickname: '',
  ...userStore.location
})
const getList = new GetList(searchTechnician, params, (res:AnyObject) => res.records)
async function reload() {
  list.value = await getList.reload()
  hasMore.value = getList._has_more
}
async function nextPage() {
  hasMore.value = getList._has_more
  list.value.push(...await getList.nextPage())
  triggerRef(list)
}
onPullDownRefresh(() => {
  if (params.nickname) reload()
  else uni.stopPullDownRefresh()
})
onReachBottom(nextPage)

// 监听返回
const back = computed(() => showTouch.value || showContactWay.value || showError.value || showSafeguard.value)
onBackPress(() => {
  if (back.value) {
    close()
    return true
  }
})
function close() {
  showTouch.value = showContactWay.value = showError.value = showSafeguard.value = false
}
</script>

<style scoped lang="scss">
.search-box{
  height: 72rpx;
  background: $color-border;
  border-radius: 36rpx;
}
</style>
